.page-catalog-container {
  @apply p-6 w-60 sticky z-10 top-16 hidden overflow-y-auto h-full;
  @apply lg:block;

  .tip {
    @apply mt-0 pt-0 font-extrabold;
  }

  ul {
    @apply list-none pl-0;

    li {
      span {
        @apply w-full text-ellipsis overflow-hidden text-nowrap;
      }
    }

    .page-catalog-menu-depth_2 {
      @apply py-4 font-semibold text-sm;
      @apply border-basic-top border-dashed;
      &.active, &:hover {
        .page-catalog-item {
          @apply text-reco-primary;
        }
      }
    }

    .page-catalog-menu-depth_3 {
      @apply pl-2 py-2 relative text-xs transition-all duration-500;
      span {
        @apply text-lighter;
      }
      &::before {
        @apply absolute inset-y-0 left-2 m-auto block w-0 h-0 rounded-1/2 transition-all duration-500;
        @apply bg-reco-primary;
        content: '';
      }
      &:hover {
        .page-catalog-item {
          @apply text-reco-primary;
        }
      }
      &.active {
        @apply pl-5;
        span {
          @apply text-reco-primary;
        }
        &::before {
          @apply w-1 h-1;
        }
      }
    }
  }
}



@media (min-width: 768px) {
  .page-catalog-container {
    max-height: calc(100vh - 4rem)
  }
}
